import React, { useEffect, useState } from 'react';
import { Modal, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
import { Box, Button, Input, Text, View } from 'native-base';
import { useBoolean } from 'ahooks';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';
import { CommonStyle } from '../common/commonStyle.ts';
import Feather from 'react-native-vector-icons/Feather';
import HomeRequest from '../request/homeRequest.ts';
import { Loading } from '../component/LoadingOverlay.tsx';
import to from '../utils/to.ts';

interface ISelectBeeperProps {
  onSelected: (id: number,item:IGetCallListRes) => void;
  onModalShow: (state: boolean) => void;
  isModalVisible: boolean;
  beeperId: number;
}

const SelectBeeper: React.FC<ISelectBeeperProps> = (props) => {
  const [isModalVisible, { toggle, setTrue, setFalse }] = useBoolean(props.isModalVisible);

  const [beeperList, setBeeperList] = useState<IGetCallListRes[]>([]);

  let readonlyBeeperList: IGetCallListRes[] = [];

  useEffect(() => {
    initializationFunction();
  }, []);

  useEffect(() => {
    props.isModalVisible ? setTrue() : setFalse();
  }, [props.isModalVisible]);

  // 初始化函数
  const initializationFunction = async () => {
    Loading.show();
    const [err, callList] = await to(HomeRequest.GetCallerList({ type: 2 }));
    if (err) {
      Loading.hide();
      return;
    }
    setBeeperList(callList.data);
    readonlyBeeperList = callList.data;
    Loading.hide();
  };

  /**
   * 搜索文字
   * @param text
   */
  const handleChangeText = (text: string) => {
    if (text) {
      const searchTerm = text.toLowerCase();
      setBeeperList(beeperList.filter((item) => item.name.toLowerCase().includes(searchTerm)));
    } else {
      setBeeperList(readonlyBeeperList);
    }
  };

  return (
    <Modal visible={isModalVisible} transparent animationType="slide">
      <View style={styles.container}>
        <Touchable
          style={styles.touchArea}
          onPress={() => {
            setBeeperList(beeperList);
            props.onModalShow(false);
          }}
        >
          <View></View>
        </Touchable>
        <View style={styles.pickerContainer}>
          <View style={styles.pickerContent}>
            <Box alignItems="center" paddingX={4}>
              <Input variant="filled" height={8} borderRadius={20} type="text" w="100%" py="0" placeholder="请输入呼叫器昵称/编号/名称" onChangeText={handleChangeText} />
            </Box>
            <ScrollView style={styles.pickerContentBox}>
              {beeperList.map((item, index) => {
                return (
                  <TouchableOpacity
                    style={styles.row}
                    key={index}
                    onPress={() => {
                      props.onModalShow(false);
                      props.onSelected(item.id,item);
                      setBeeperList(beeperList);
                    }}
                  >
                    <Text color={props.beeperId === item.id ? CommonStyle.mainColor : CommonStyle.textColor}>{item.name}</Text>
                    {props.beeperId === item.id && <Feather size={22} name={'check-circle'} color={CommonStyle.mainColor} />}
                  </TouchableOpacity>
                );
              })}
            </ScrollView>
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  header: { paddingHorizontal: 8, paddingBottom: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  box: { backgroundColor: '#fff', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 5, marginRight: 8 },
  searchBox: { backgroundColor: '#fff', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 33, height: 33, borderRadius: 50, marginRight: 10 },

  container: { flex: 1, justifyContent: 'flex-end' },
  touchArea: { flex: 1 },
  pickerContainer: { backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20 },
  pickerContent: { position: 'relative', height: 450, paddingVertical: 16 },
  pickerContentBox: { flex: 1, marginTop: 10, paddingHorizontal: 16 },
  row: { width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, borderBottomColor: '#ddd', borderBottomWidth: 1 },
});

export default SelectBeeper;
